<template>
    <div class="preview">
        <el-dialog title="上传" :visible.sync="dialogVisibless" width="90%" @close="open">
            <div class="el-dialog-div" v-show="!hiddens">
                <el-table :data="datas" style="width: 100%" max-height="80vh" :row-class-name="tableRowClassName">
                    <el-table-column prop="orderId" label="第三方订单ID" width="120"></el-table-column>
                    <el-table-column prop="plat" label="第三方平台名称" width="120"></el-table-column>
                    <el-table-column prop="shopName" label="店铺名称" width="120"> </el-table-column>
                    <el-table-column prop="payTime" label="下单时间" width="120"> </el-table-column>
                    <el-table-column prop="province" label="省" width="120"> </el-table-column>
                    <el-table-column prop="city" label="市" width="120"> </el-table-column>
                    <el-table-column prop="county" label="县" width="120"> </el-table-column>
                    <el-table-column prop="streetDetail" label="详细地址" width="120"> </el-table-column>
                    <el-table-column prop="contactWay" label="联系方式" width="120"> </el-table-column>
                    <el-table-column prop="recipientsName" label="收件人名称" width="120"> </el-table-column>
                    <el-table-column prop="outerGoods.skuNo" label="商品标识" width="160"> </el-table-column>
                    <el-table-column prop="outerGoods.settleMoney" label="商品结算金额" width="120"> </el-table-column>
                    <el-table-column prop="outerGoods.num" label="商品数量" width="120"> </el-table-column>
                    <el-table-column prop="remarks" label="备注" width="120"> </el-table-column>
                </el-table>
                <div v-if="lists != '[]'" class="list">
                    <div>错误：</div>
                    <ul v-for="(item, index) in lists" :key="index">
                        <li>{{ item }}</li>
                    </ul>
                </div>
            </div>
            <div v-show="hiddens" class="el-dialog-div err">{{ msg }}</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="open()">取 消</el-button>
                <el-button type="primary" :disabled="disabled" @click="tosure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { toImportOrder } from '@/api/biz/order';
export default {
    name: 'preview',
    data() {
        return {
            err: '',
            isshow: true,
            disabled: false
        };
    },
    // props: ["datas", "dialogVisibless", "hiddens"],
    props: {
        dialogVisibless: {
            //   type: Boolean,
            //   default: false
        },
        hiddens: {
            //   type: Boolean,
            //   default: false
        },
        datas: {
            //   type: Boolean,
        },
        msg: {},
        lists: {}
    },
    computed: {},
    mounted() {},
    beforeDestroy() {},
    methods: {
        tableRowClassName({ row, rowIndex }) {
            //  console.log(row.errorFields.length);
            if (row.errorFields.length != '2') {
                this.disabled = true;
                return 'warning-row';
            } else {
                this.disabled = false;
            }
        },
        // 请求数据
        tosure() {
            if (this.disabled != false) {
                this.$emit('showbox');
            } else {
                toImportOrder().then(res => {
                    // console.log(res);
                    if (res.code == '200') {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.opens();
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.open();
                });
            }
        },
        open() {
            this.$emit('showbox');
        },
        opens() {
            this.$emit('showboxs');
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
.preview .shopid {
    height: 60vh;
    overflow: auto;
}
.preview .list {
    color: #f56c6c;
    margin-top: 20px;
}
.el-dialog-div {
    height: 60vh;
    overflow: auto;
}
.preview .err {
    color: #909399;
    text-align: center;
    line-height: 60vh;
}
</style>
